<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Button</title>
    </head>
    <body>
        <style>
            body {
                background-color: #272822;
            }

            .button {
                background-color: #3d2597;
                padding: 1em 1.5em;
                font-size: 14px;
                text-align: center;
                color: #f3edfc;
                display: inline-block;
                border-radius: 50px;
                border: 2px solid #7155dc;
                box-shadow: 0 0 2px #505050;
                margin: 0;
                transition: all 0.15s ease-in;
                user-select: none;
                cursor: pointer;
                outline: none;
            }
            .button:hover {
                box-shadow: 0 0 2px #9880fa;
                background-color: #593cc2;
            }
            .button:active {
                border-color: #c07b28;
                box-shadow: 0 0 2px #7655fc;
                background-color: #3517a1;
                transform: translateY(2px);
            }
        </style>
        <button class="button">
            <span>View All Projects</span>
        </button>
    </body>
</html>
